<template>
  <div class="px-[30px] py-5 user-info w-full flex flex-col items-center">
    <div
      class="info-top mt-[30px] w-[60%] h-[200px] flex flex-col justify-center items-center"
      :style="{
        'background-image': `url('${appStore.getUserInfoBg}')`,
      }"
    >
      <div class="info-item">
        <div class="avatar">
          <ElAvatar :size="60" :src="userInfo.avatar"></ElAvatar>
          <div class="change-btn">
            <CropperUpload @change="setUserInfo($event, UserFieldEnum.AVATAR)">
              <span class="text-md text-white">修改</span>
            </CropperUpload>
          </div>
        </div>
      </div>
      <div class="info-item leading-10 mt-[10px]">
        <div class="text-[var(--color-btn-text)]">
          {{ userInfo.nickname }}
          <ClientOnly>
            <PopoverInput
              class="inline-block"
              @confirm="setUserInfo($event, UserFieldEnum.NICKNAME)"
              :limit="30"
              show-limit
            >
              <ElButton link>
                <Icon name="el-icon-Edit" :size="16" />
              </ElButton>
            </PopoverInput>
          </ClientOnly>
        </div>
      </div>
    </div>
    <div
      class="info-bottom mt-[20px] w-[60%] h-[400px] flex flex-col justify-center items-center text-[var(--color-btn-text)] bg-[var(--el-bg-color-base)]"
    >
      <div>
        <div class="info-item leading-10">
          <div class="item-name">用户ID</div>
          <div class="item-value">
            {{ userInfo.sn }}
            <!-- <ClientOnly>
            <PopoverInput
              class="inline-block"
              @confirm="setUserInfo($event, UserFieldEnum.USERNAME)"
              :limit="30"
              show-limit
            >
              <ElButton link>
                <Icon name="el-icon-Edit" :size="16" />
              </ElButton>
            </PopoverInput>
          </ClientOnly> -->
          </div>
        </div>
        <div class="info-item leading-10">
          <div class="item-name">手机号</div>
          <div class="item-value" v-if="userInfo.mobile">
            {{ userInfo.mobile }}
          </div>

          <!-- <ElButton link type="primary" @click="changeMobile">
                    {{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}
                </ElButton> -->
        </div>
        <div class="info-item leading-10">
          <div class="item-name">注册时间</div>
          <div class="item-value">
            {{ userInfo.registerTime }}
          </div>
        </div>
        <div class="info-item leading-10">
          <div class="item-name">修改密码</div>
          <div class="item-value">
            ********
            <ElButton link @click="changePwd">
              <Icon name="el-icon-Edit" :size="16" />
            </ElButton>
          </div>
        </div>
        <div class="info-item leading-10">
          <div class="item-name text-[14px] text-[var(--color-text-base)]">
            我的用量
          </div>
          <div class="item-value">
            <div class="bg-[var(--color-text-base)] h-[1px] w-[200px]"></div>
          </div>
        </div>
        <div class="info-item leading-10">
          <div class="item-name">剩余用量</div>
          <div class="item-value">
            <span class="mr-[20px]">
              对话：<span class="text-[#F86E07]">{{
                userInfo.balance
              }}</span></span
            >
            <span>
              绘画：<span class="text-[#F86E07]">{{
                userInfo.balanceDraw
              }}</span></span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-if="false">
      <el-switch
        v-model="isDark"
        inline-prompt
        active-color="var(--el-fill-color-dark)"
        inactive-color="var(--el-color-primary)"
        @change="toggleDark"
      />
    </div>
    <!-- <div class="mt-[60px] flex justify-center">
      <ElButton type="primary" @click="handleLogut">退出登录</ElButton>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
import { ElAvatar, ElButton } from "element-plus";
import { getUserInfo, userEdit, userChangePwd } from "@/api/user";
import CropperUpload from "@/components/cropper-upload/index.vue";
import PopoverInput from "@/components/popover-input/index.vue";
import { logout } from "~~/api/account";
import feedback from "~~/utils/feedback";
import { useUserStore } from "~~/stores/user";
import { useAppStore } from "~~/stores/app";
import { h, ref } from "vue";
import { ElMessageBox, ElInput } from "element-plus";
const userStore = useUserStore();
const appStore = useAppStore();
const userInfo = computed(() => {
  return userStore.userInfo;
});

// 用户资料
enum UserFieldEnum {
  NONE = "",
  AVATAR = "avatar",
  USERNAME = "account",
  NICKNAME = "nickname",
  SEX = "sex",
}

const setUserInfo = async (
  value: string,
  type: UserFieldEnum
): Promise<void> => {
  await userEdit({
    field: type,
    value: value,
  });
  userStore.getUser();
};
const newData = reactive<any>({
  password: "",
  oldPassword: "",
});
const changePwd = () => {
  ElMessageBox({
    title: "修改密码",
    showCancelButton: true,
    message: () =>
      h("div", null, [
        h("div", { style: { margin: "10px 0" } }, "旧密码"),
        h(ElInput, {
          modelValue: newData.password,
          placeholder: "请输入旧密码",
          "onUpdate:modelValue": (val: string | number) => {
            newData.password = val;
          },
        }),
        h("div", { style: { margin: "10px 0" } }, "新密码"),
        h(ElInput, {
          modelValue: newData.oldPassword,
          placeholder: "请输入6-20位数字+字母或符号组合",
          "onUpdate:modelValue": (val: string | number) => {
            newData.oldPassword = val;
          },
        }),
      ]),
    beforeClose: async (e, instance, done) => {
      console.log(e);

      try {
        if (e === "cancel") {
          return done();
        }
        await userChangePwd(newData);
        done();
      } catch (error) {}
    },
  });
};

const handleLogut = async () => {
  await feedback.confirm("确定退出登录吗？");
  await logout();
  userStore.logout();
};

definePageMeta({
  module: "personal",
  auth: true,
});
</script>
<style lang="scss" scoped>
.user-info {
  .info-top {
    max-width: 920px;
    min-width: 600px;
    border-radius: 8px;
    background-size: 920px 200px;
  }

  .info-bottom {
    max-width: 920px;
    min-width: 600px;
    border-radius: 8px;
  }
  .info-item {
    display: flex;
    align-items: center;
    .item-name {
      margin-right: 20px;
      text-align: right;
      width: 80px;
    }
    .item-value {
      color: var(--el-text-color-regular);
    }
  }
  .avatar {
    @apply relative flex cursor-pointer;
    .change-btn {
      display: none;
      height: 50%;
      line-height: 30px;
      @apply absolute bg-[rgba(0,0,0,0.5)]  w-full text-center bottom-0 rounded-b-full;
    }
    &:hover {
      .change-btn {
        display: block;
      }
    }
  }
}
</style>
